<template>
  <div class="regist">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 50px;margin-bottom: 20px">
          <div class="well bs-component">
            <form action="">
              <span class="text-center">注册</span>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <label class="control-label">用户名</label><label class="control-label tip">{{tip}}</label>
                  <input @focus="userNameInput()" @blur="userNameOutput()" v-model="username" type="text" placeholder="请输入用户名" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <label class="control-label">邮箱地址</label><label class="control-label tip">{{emailTip}}</label>
                  <input @focus="emailInput()" @blur="emailOutput()" v-model="email" type="text" placeholder="请输入邮箱地址" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <label class="control-label">密码</label><label class="control-label tip">{{passwordTip}}</label>
                  <input @focus="passwordInput()" @blur="passwordOutput()" v-model="passwordOnce" type="password" placeholder="请输入密码" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <label class="control-label">确认密码</label><label class="control-label tip">{{passwordTwiceTip}}</label>
                  <input @focus="passwordCheckInput()" @blur="passwordCheckOutput()" v-model="passwordTwice" type="password" placeholder="请输入确认密码" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1 btn-reg">
                  <button class="btn btn-primary form-control">注册</button>
                  <div class="login-link">
                    <router-link to="/login" class="login-link">您已有账号？请点击此处</router-link>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import $ from 'jquery'

  export default {
    data () {
      return {
        username: '',
        email: '',
        passwordOnce: '',
        passwordTwice: '',
        tip: '',
        emailTip: '',
        passwordTip: '',
        passwordTwiceTip: '',
        apiUrlCheckUserName: 'http://localhost:8080/user/checkUserNameExist.do',
        apiUrlCheckEmail: 'http://localhost:8080/user/checkEmailExist.do',
        userNameCheck: false,
        emailCheck: false,
        passwordCheck: false,
        passwordTwiceCheck: false
      }
    },
    methods: {
      checkUserName (username) {
        var nameRegex = /^[^@#]{4,16}$/
        if (!nameRegex.test(username)) {
          this.tip = '用户名须为4~16个字符，且不能包含"@"和"#"字符'
          this.userNameCheck = false
        } else {
          return true
        }
      },
      userNameInput () {
        this.tip = ''
      },
      userNameOutput () {
        if (this.checkUserName(this.username)) {
          $.post(this.apiUrlCheckUserName,
            {
              account: this.username
            }, (data, status) => {
              console.log('data:' + data)
              console.log('status:' + status)
            })
//          axios.get(this.apiUrlCheckUserName, {
//            params: {
//              account: this.username
//            }
//          }).then(response => {
//            console.log(response.data)
//            if (response.data) {
//              this.tip = '用户已存在'
//              this.userNameCheck = false
//            } else {
//              this.userNameCheck = true
//            }
//          }).catch(error => {
//            alert('网络异常')
//            console.log(error)
//          })
//          this.$http.post(this.apiUrl1, {account: this.username}).then(response => {
//            console.log('response :' + response.body)
//            console.log('status :' + response.status)
//          }, response => {
//            console.log(this.username)
//            alert('网络异常')
//            console.log(response.status)
//          })
//          axios.post(this.apiUrl1, {
//            account: this.username
//          }).then(function (response) {
//            console.log(response)
//          }).catch(function (error) {
//            console.log(error)
//          })
        }

//        if (this.checkUserName(this.username)) {
//          this.$http.get('http://localhost:8080/user/checkUserNameExist.do', {params: {account: this.username}}).then(response => {
//            console.log('response :' + response.body)
//            console.log('status :' + response.status)
//            this.tip = '用户已存在'
//          }, response => {
//            console.log(this.username)
//            alert('网络异常')
//            console.log(response.status)
//          })
//        }
      },
      checkEmail (email) {
        var emailRegex = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
        if (!emailRegex.test(email)) {
          this.emailTip = '请输入正确的邮箱格式'
          this.emailCheck = false
        } else {
          return true
        }
      },
      emailInput () {
        this.emailTip = ''
      },
      emailOutput () {
        if (this.checkEmail(this.email)) {
          axios.get(this.apiUrlCheckEmail, {
            params: {
              email: this.email
            }
          }).then(response => {
            console.log(response.data)
            if (response.data) {
              this.tip = '邮箱已存在'
              this.emailCheck = false
            } else {
              this.emailCheck = true
            }
          }).catch(error => {
            alert('网络异常')
            console.log(error)
          })
        }
      },
      checkPasswordOnce (password) {
        var passwordRegex = /^(\w){6,20}$/
        if (!passwordRegex.test(password)) {
          this.passwordTip = '密码不能少于6位且由数字、字符、特殊字符三种中的两种组成'
          this.passwordCheck = false
        } else {
          return true
        }
      },
      checkPasswordTwice (password, passwordTwice) {
        if (password === passwordTwice) {
          return true
        } else {
          this.passwordTwiceTip = '两次密码输入不一致'
          this.passwordTwiceCheck = false
        }
      },
      passwordInput () {
        this.passwordTip = ''
      },
      passwordOutput () {
        this.checkPasswordOnce(this.passwordOnce)
      },
      passwordCheckInput () {
        this.passwordTwiceTip = ''
      },
      passwordCheckOutput () {
        if (this.checkPasswordTwice(this.passwordOnce, this.passwordTwice)) {
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .well
    background-color #ecf0f1
    color #636b6f
    border none
  .text-center
    text-align center
    display block
    font-size 21px
  .control-label
    font-size 14px
    padding-top 8px
    margin-top 14px
  .bs-component
    display block
    width 555px
    height 550px
  .form-control
    border 1px solid #dce4ec
    height 41px
  .form-group
    margin-left -15px
    margin-right -15px
  .btn-reg
    margin-top 20px
  .btn-primary
    background-color #34495e
    border-color #34495e
  .login-link
    margin-top 14px
    color: #555
    display block
    text-decoration none
    font-size 14px
    text-align center
  .login-link:hover
    display block
    text-decoration none
    font-size 14px
    text-align center
  .tip
    padding-left 10px
    color red
</style>
